import {Button, Descriptions, Drawer, Space} from 'antd';
import {connect} from 'umi';

const contentWidth = 280;
const labelWidth = 140;

const Detail = (props) => {
  const {detail, setDetail} = props.data;

  /* 取消操作 */
  function onCancel() {
    setDetail(undefined);
  }

  // 判断详情为空
  if (!detail) {
    return null;
  }

  let genderName;
  switch (detail.data.gender) {
    case 0:
      genderName = '未知';
      break;
    case 1:
      genderName = '男';
      break;
    case 2:
      genderName = '女';
      break;
  }

  return (
    <Drawer
      title={detail ? detail.title : ''}
      width={900}
      onClose={onCancel}
      open={detail ? detail.visible : false}
      bodyStyle={{paddingBottom: 80}}
      extra={
        <Space>
          <Button onClick={onCancel}>取消</Button>
        </Space>
      }
    >
      <Descriptions column={2} bordered={true} size={'small'} labelStyle={{textAlign: 'right'}}>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="用户名称">{detail.data.name ? detail.data.name : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="手机号码">{detail.data.mobile ? detail.data.mobile : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="当前余额"><span
          style={{color: 'green'}}>{(detail.data.balanceAmount / 100).toFixed(2)}</span></Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="当前积分"><span style={{color: 'green'}}>{detail.data.pointAmount}</span></Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="用户编号">{detail.data.code ? detail.data.code : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="邮箱">{detail.data.email ? detail.data.email : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="真实姓名">{detail.data.realName ? detail.data.realName : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="性别">{genderName ? genderName : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="电话">{detail.data.tel ? detail.data.tel : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="身份证号">{detail.data.idsn ? detail.data.idsn : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="生日">{detail.data.birthday ? detail.data.birthday : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="状态">{detail.data.status === 0 ? '停用' : '正常'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="区县名称">{detail.data.reginName ? detail.data.reginName : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="备注信息">{detail.data.remark ? detail.data.remark : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="创建时间">{detail.data.createTime ? detail.data.createTime : '暂无'}</Descriptions.Item>
        <Descriptions.Item
          contentStyle={{width: contentWidth}}
          labelStyle={{width: labelWidth}}
          label="更新时间">{detail.data.updateTime ? detail.data.updateTime : '暂无'}</Descriptions.Item>
      </Descriptions>
    </Drawer>
  );
};


export default connect(({}) => {
  return {};
})(Detail);

